<template>
  <div class="guide">
    <transition name="drop" @before-enter="beforeDrop" @enter="dropping" @after-enter="afterDrop"  @before-leave="beforeLeave">
      <div class="step0" v-show="index==0" >
        <div @click='addindex()'></div>
      </div>
    </transition>
    <div class="step1 " v-show="index==1">
      <div @click='addindex()'></div>
    </div>
    <div class="step2" v-show="index==2">
      <div @click='addindex()'></div>
    </div>
    <div class="step3" v-show="index==3">
      <div @click='addindex()'></div>
    </div>
    <div class="step4" v-show="index==4">
      <div @click='addindex()'></div>
    </div>
    <div class="step5" v-show="index==5">
      <div @click='addindex()'></div>
    </div>
  </div>
</template>
<script>
export default {
  name:'guide',
  data(){
    return{
      index:-1
    }
  },
  mounted(){
    // this.$nextTick(function(){
      this.index = 0
    // })
  },
  methods:{
    addindex(){
      this.index++
      if(this.index==6){

        this.$router.go(-1)
      }
    },
    beforeDrop(el) {
        if (this.index ==0) {
          el.style.webkitTransform = `scale(0.1)`;
          el.style.transform = `scale(0.1)`;
          el.style.transition = 'all 1.65s '
          
        }
    },
    dropping(el, done) {
      /* eslint-disable no-unused-vars */
      
      let rf = el.offsetHeight;

      this.$nextTick(() => {
          el.style.transform = 'translate3d(0,0,0)'
          
          el.addEventListener('transitionend', done);
      })
      done()
    },
    afterDrop(el) {
      console.log(el)
    },
    beforeLeave(el){
      el.style.transition = 'none '
    }
  }
}
</script>

<style lang="stylus" scoped>
  .guide
    position fixed
    top 0
    left 0
    right 0
    bottom 0
    z-index 999
    >div
      position relative
      width 100%
      height 100%
      for item in step0 step1 step2 step3 step4 step5
        &.{item}
          background-image 'url(./img/%s.png)' % item
          background-repeat no-repeat
				  background-size 100% 100%
      >div
        width 180px
        height 57px
        background url(./img/next.png) no-repeat
        background-size contain
        cursor pointer
      &.step0
        transform-origin 0 0
        position absolute
        left 0
        top 0
        div
          position absolute
          right 10vw
          bottom 20vh
      &.step1
        div
          position absolute
          left  50vw
          bottom 30vh
      &.step2
        div
          position absolute
          left  45vw
          bottom 25vh
      &.step3
        div
          position absolute
          right   20vw
          bottom 25vh
      &.step4
        div
          position absolute
          right 20vw
          top 35vh
      &.step5
        div
          position absolute
          right 23vw
          bottom 18vh
          background url(./img/finish.png) no-repeat
          background-size contain
@media screen and (max-width: 1800px) 
  .guide
    >div
      >div
        transform scale(0.8)

@media screen and (max-width: 1300px) 
  .guide
    >div
      >div
        transform scale(0.6)

</style>

